<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="70"
          class="search-form"
          @submit.native.prevent
        >
          <Form-item label="直播标题" prop="name">
            <Input
              type="text"
              v-model="searchForm.name"
              placeholder="请输入直播标题"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="直播专家" prop="username">
            <Input
              type="text"
              v-model="searchForm.username"
              placeholder="请输入直播专家"
              clearable
              style="width: 200px"
            />
          </Form-item>
          <Form-item label="状态" prop="process">
            <Select
              v-model="searchForm.process"
              placeholder="请选择审核状态"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in processList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Form-item label="直播类型" prop="type">
            <Select
              v-model="searchForm.type"
              placeholder="请选择直播类型"
              clearable
              style="width: 200px"
            >
              <Option
                v-for="(item, index) in typeList"
                :key="index"
                :value="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </Form-item>
          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
        </Form>
      </Row>
      <!-- <Row class="operation padding-row">
        <Button @click="batchDel">批量删除</Button>
      </Row> -->
      <Table
        :loading="loading"
        border
        :columns="columns"
        sortable="custom"
        class="mt_10"
        :data="data"
        ref="table"
        @on-selection-change="changeSelect"
      ></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page
          :current="searchForm.page"
          :total="total"
          :page-size="searchForm.rows"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <Modal
      v-model="detailShow"
      :title="detailAction == '审核' ? '直播内容审核' : '直播详情'"
      :width="900"
      :footer-hide="detailAction == '详情'"
    >
      <Form v-if="detailRow" ref="detailRow" :model="detailRow" :label-width="150">
        <FormItem label="直播标题" prop="name">
          <Input v-model="detailRow.name" disabled />
        </FormItem>
        <FormItem label="直播人员" prop="username">
          <Input v-model="detailRow.username" :maxlength="10" disabled />
        </FormItem>
        <FormItem label="直播时间" prop="time">
          <TimePicker
            v-model="detailRow.time"
            format="HH:mm"
            type="timerange"
            style="width: 300px"
            disabled
          />
        </FormItem>
        <FormItem label="直播类型" prop="type">
          <Radio-group v-model="detailRow.type">
            <Radio v-for="i in typeList" :key="i.value" :label="i.value" disabled>{{
              i.label
            }}</Radio>
          </Radio-group>
        </FormItem>
        <FormItem label="关联栏目">
          <div v-for="(item, index) in detailRow.nameList" :key="index" class="tagCla">
            <div>{{ item.name }}：</div>
            <div class="tagItem checkTag" v-for="(a, k) in item.children" :key="k">
              {{ a.name }}
            </div>
          </div>
        </FormItem>
        <FormItem label="直播描述" prop="roomDetail">
          <Input
            v-model="detailRow.roomDetail"
            type="textarea"
            :maxlength="100"
            :autosize="{ minRows: 10 }"
            disabled
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="success" @click="submitForm(true)">通过</Button>
        <Button type="primary" @click="submitForm(false)">拒绝</Button>
      </div>
    </Modal>
    <Modal v-model="refuseShow" title="审核拒绝">
      <div>
        <Input
          type="textarea"
          v-model="remarks"
          :rows="6"
          :maxlength="100"
          placeholder="请输入拒绝原因"
          clearable
        />
      </div>
      <div slot="footer">
        <Button type="text" @click="refuseShow = false">关闭</Button>
        <Button type="primary" @click="approved('REFUSE')">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import * as API_Studio from "@/api/studio.js";

export default {
  name: "examine-list",
  data() {
    return {
      loading: false, // 加载状态
      searchForm: {
        // 请求参数
        page: 1,
        rows: 10,
        name: null, // 直播标题
        username: null, // 直播专家
        process: null, // 状态
        type: null, // 直播类型
      },
      processList: [
        // 审核状态列表
        { value: "TOBEAUDITED", label: "待审核" },
        { value: "PASS", label: "通过" },
        { value: "REFUSE", label: "不通过" },
      ],
      typeList: [
        // 直播类型
        { value: "KNOWLEDGE", label: "知识" },
        { value: "GOODS", label: "商品" },
      ],
      columnList: [], // 栏目列表
      selectList: [], // 多选数据
      detailRow: {}, // 当前操作行
      detailShow: false, // 审核、详情弹窗
      detailAction: "", // 弹窗标题
      refuseShow: false, // 审核拒绝弹窗
      remarks: "", // 拒绝原因
      columns: [
        // 表头
        // { type: "selection", width: 60, align: "center" },
        { title: "序号", width: 100, type: "index" },
        { title: "直播标题", key: "name", minWidth: 120, tooltip: true },
        {
          title: "直播类型",
          minWidth: 120,
          tooltip: true,
          render: (h, params) => {
            return h("span", {}, params.row.type == "KNOWLEDGE" ? "知识" : "商品");
          },
        },
        { title: "直播专家", key: "username", minWidth: 120, tooltip: true },
        { title: "直播开始时间", key: "startTime", minWidth: 180, tooltip: true },
        { title: "直播结束时间", key: "endTime", minWidth: 180, tooltip: true },
        {
          title: "状态",
          minWidth: 100,
          render: (h, params) => {
            let label = "待审核";
            if (params.row.process == "PASS") label = "通过";
            if (params.row.process == "REFUSE") label = "不通过";
            return h("span", {}, label);
          },
        },
        {
          title: "上架状态",
          minWidth: 100,
          render: (h, params) => {
            let label = "";
            if (params.row.process == "PASS") {
              label =
                params.row.isOnline == "1"
                  ? "已上架"
                  : params.row.isOnline == "2"
                  ? "已下架"
                  : "待上架";
            } else {
              label = "";
            }
            return h("span", {}, label);
          },
        },
        {
          title: "操作",
          align: "center",
          width: 200,
          fixed: "right",
          render: (h, params) => {
            let func = [];
            if (params.row.process == "TOBEAUDITED" && !params.row.isHistory) {
              func.push(this.btnDom(h, null, "审核", "handleView", params));
            } else {
              func.push(this.btnDom(h, null, "详情", "handleView", params));
            }
            if (params.row.process == "PASS" && params.row.isHistory == 2) {
              if (params.row.isOnline == "1") {
                func.push(this.btnDom(h, "error", "下架", "handlePut", params));
              } else {
                func.push(this.btnDom(h, "warning", "上架", "handlePut", params));
              }
            }
            return h(
              "div",
              { style: { display: "flex", justifyContent: "center" } },
              func
            );
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
      typeArr: [],
    };
  },
  methods: {
    getTypeList() {
      API_Studio.getListCh().then((res) => {
        for (let key in res.result) {
          this.typeArr.push({
            name: key,
            children: res.result[key],
          });
        }
      });
    },
    // 分页 改变页码
    changePage(v) {
      this.searchForm.page = v;
      this.getData();
    },
    // 分页 改变页数
    changePageSize(v) {
      this.searchForm.rows = v;
      this.searchForm.page = 1;
      this.getData();
    },
    // 搜索
    handleSearch() {
      this.searchForm.page = 1;
      this.searchForm.rows = 10;
      this.getData();
    },
    //多选
    changeSelect(e) {
      this.selectList = e;
    },
    // 按钮
    btnDom(h, type = null, label = "", method, params, ghost = false) {
      return h(
        "Button",
        {
          props: { type, size: "small", ghost },
          style: { marginRight: "5px" },
          on: {
            click: () => {
              this[method](params.row, label);
            },
          },
        },
        label
      );
    },
    // 直播上架/下架
    handlePut(v, label) {
      this.$Modal.confirm({
        title: "确认" + label,
        content: "<p>您确认要" + label + "该直播吗？</p>",
        onOk: () => {
          let params = {
            id: v.studioId,
            isOnline: v.isOnline == 1 ? 2 : 1,
          };
          API_Studio.setAppealStatus(params).then((res) => {
            if (res.success) {
              this.$Message.success("直播已" + label);
              this.getData();
            }
          });
        },
      });
    },
    // 详情、审核
    handleView(v, label) {
      let row = Object.assign({}, v);
      row.time = row.startTime + " - " + row.endTime;
      this.detailRow = row;
      this.detailAction = label;
      this.detailRow.nameList = this.fifterName(
        this.typeArr,
        this.detailRow.courseCategory.split(",")
      );
      this.detailShow = true;
    },
    fifterName(originData, filterParamData) {
      let result = [];
      for (let i = 0; i < originData.length; i++) {
        let pNode = originData[i];
        let children = [];
        for (let j = 0; j < pNode.children.length; j++) {
          let node = pNode.children[j];
          if (filterParamData.includes(node.id)) {
            children.push(node);
          }
        }
        if (children.length > 0) {
          result.push({ name: pNode.name, children });
        }
      }
      return result;
    },
    // 提交审核
    submitForm(v) {
      if (v) {
        // 通过
        this.approved("PASS");
      } else {
        // 拒绝
        this.detailShow = false;
        this.remarks = "";
        this.refuseShow = true;
      }
    },
    // 审核
    approved(process) {
      let params = {
        process,
        refuseReason: process == "PASS" ? "" : this.remarks,
        userId: this.detailRow.userId,
        id: this.detailRow.id,
      };
      API_Studio.studioReport(params).then((res) => {
        if (res.success) {
          this.$Message.success(process == "PASS" ? "已通过" : "已拒绝");
          this.detailRow = {};
          this.detailShow = false;
          this.refuseShow = false;
          this.getData();
        }
      });
    },
    // 批量删除
    batchDel() {
      if (this.selectList.length) {
        this.$Modal.confirm({
          title: "确认删除",
          content:
            "<p>您确认要删除所选的" + this.selectList.length + "条直播审核吗？</p>",
          onOk: () => {
            let ids = this.selectList
              .map((i) => {
                return i.id;
              })
              .join(",");
            API_Studio.studioBatchDelReport({ ids }).then((res) => {
              if (res.success) {
                this.$Message.success("删除成功");
                this.getData();
              }
            });
          },
        });
      } else {
        this.$Message.warning("请先勾选数据");
      }
    },
    //查询直播审核列表
    getData() {
      this.loading = true;
      API_Studio.getStudioReportPage(this.searchForm)
        .then((res) => {
          if (res.success) {
            this.data = res.result.records;
            this.total = parseInt(res.result.total);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  mounted() {
    this.getData();
    this.getTypeList();
  },
};
</script>
<style lang="scss" scoped>
::v-deep .ivu-table-wrapper {
  width: 100%;
}
::v-deep .ivu-card {
  width: 100%;
}
.tagCla {
  display: flex;
  align-items: center;
  .tagItem {
    user-select: none;
    display: inline-block;
    border: 1px solid #e7e7e7;
    text-align: center;
    min-width: 90px;
    padding: 0 15px;
    margin: 5px 5px;
    color: #888888;
    border-radius: 6px;
  }
  .checkTag {
    color: #5dd6c9;
    background-color: #edfaf9;
    border: 1px solid #caf1ed;
  }
}
</style>
